<script setup lang="ts">
import { useRouter } from 'vue-router'
import StatCard from './components/StatCard.vue'
import QuickEntryCard from './components/QuickEntryCard.vue'
import ChartRegisteredTrend from './components/ChartRegisteredTrend.vue'
import ChartGenderRatio from './components/ChartGenderRatio.vue'

// 本地图标
import RegisteredImg from '@/assets/athlete/icons/registered.png'
import PendingImg from '@/assets/athlete/icons/pending.png'
import MonthlyImg from '@/assets/athlete/icons/monthly.png'
import RatioImg from '@/assets/athlete/icons/ratio.png'

import RegisterEntry from '@/assets/athlete/icons/registerEntry.png'
import AuditEntry from '@/assets/athlete/icons/auditEntry.png'
import searchEntry from '@/assets/athlete/icons/searchEntry.png'
import changeEntry from '@/assets/athlete/icons/changeEntry.png'

const router = useRouter()

// 统计卡片数据 - 汇总多个业务类型的数据
const statCards = ref([
	{
		title: '已注册运动员',
		value: '1,500',
		image: RegisteredImg
	},
	{
		title: '待核准申请',
		// 计算逻辑：（首次注册+年度确认+项目变更+单位变更）所有待核准总和
		value: '28',
		image: PendingImg
	},
	{
		title: '本月通过',
		// 计算逻辑：（首次注册+年度确认+项目变更+单位变更）所有通过总和
		value: '156',
		image: MonthlyImg
	},
	{
		title: '本月平均通过率',
		// 计算逻辑：（首次注册+年度确认+项目变更+单位变更）通过数量/申请总和，同一运动员被驳回后再次提交算一个，不重复计数
		value: '77%',
		image: RatioImg
	}
])

const quickEntryCards = [
	{
		title: '运动员注册核准',
		subtitle: '注册申请审核处理',
		icon: AuditEntry,
		// 跳转到运动员注册管理——首次注册，默认选择【待处理】
		path: '/athleteFirst/firstManagement',
		query: {
			tab: 'firstRegister',
			status: 'pending'
		}
	},
	{
		title: '运动员信息查询',
		subtitle: '运动员档案查看',
		icon: searchEntry,
		path: '/athleteFirst/list'
	},
	{
		title: '运动员变更核准',
		subtitle: '变更申请核准处理',
		icon: changeEntry,
		// 跳转到运动员变更管理——项目变更，默认选择【待处理】
		path: '/athleteChange/changeManagement',
		query: {
			tab: 'projectChange',
			status: 'pending'
		}
	},
	{
		title: '运动员注册公示',
		subtitle: '运动员注册信息公示',
		icon: RegisterEntry,
		path: '/athleteFirst/firstPublicity'
	}
]

// 快捷入口点击跳转
const handleQuickEntry = (path: string, query?: Record<string, any>) => {
	if (query) {
		router.push({
			path,
			query
		})
	} else {
		router.push(path)
	}
}
</script>

<template>
	<div class="w-full justify-center space-y-5">
		<!-- 顶部统计卡 -->
		<div class="grid gap-5 grid-cols-[repeat(auto-fit,minmax(260px,1fr))]">
			<StatCard
				v-for="(c, idx) in statCards"
				:key="idx"
				:title="c.title"
				:value="c.value"
				:image="c.image"
			/>
		</div>

		<!-- 中部图表 + 右侧快捷入口 -->
		<div class="grid grid-cols-[1fr_357px] mt-5 gap-4 w-full">
			<ChartRegisteredTrend />
			<div class="h-[440px] p-4 bg-primary">
				<div class="text-base leading-6 text-primary mb-2.5 ml-1">快捷入口</div>
				<div class="flex flex-col gap-4">
					<!-- 采用循环处理 -->
					<QuickEntryCard
						v-for="(c, idx) in quickEntryCards"
						:key="idx"
						:title="c.title"
						:subtitle="c.subtitle"
						:icon="c.icon"
						@click="() => handleQuickEntry(c.path, c.query)"
					/>
				</div>
			</div>
		</div>

		<!-- 下方性别统计图表 -->
		<div class="w-full mt-5">
			<ChartGenderRatio />
		</div>
	</div>
</template>
